<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mobile</title>
    <link rel="stylesheet" href="oban.css"/>
    <style>
      body {
        margin: 20px;
      }
      
    </style>
  </head>
  <body class="mobile">
    <h1>Helper Classes</h1>
    <div class="visible">
      <h2>Visible</h2>
      <div class="block">
        <span class="show-tiny">Visible on Tiny</span>
        <span class="hide-tiny">Tiny</span>
      </div>
      <div class="block">
        <span class="show-small">Visible on Small</span>
        <span class="hide-small">Small</span>
      </div>
      <div class="block">
        <span class="show-medium">Visible on Medium</span>
        <span class="hide-medium">Medium</span>
      </div>
      <div class="block">
        <span class="show-large">Visible on Large</span>
        <span class="hide-large">Large</span>
      </div>
    </div>
    <div class="hidden">
      <h2>Hidden</h2>
      <div class="block">
        <span class="show-tiny">Tiny</span>
        <span class="hide-tiny">Hidden on Tiny</span>
      </div>
      <div class="block">
        <span class="show-small">Small</span>
        <span class="hide-small">Hidden on Small</span>
      </div>
      <div class="block">
        <span class="show-medium">Medium</span>
        <span class="hide-medium">Hidden on Medium</span>
      </div>
      <div class="block">
        <span class="show-large">Large</span>
        <span class="hide-large">Hidden on Large</span>
      </div>
    </div>
    <div class="grid">
      <h1>Grid</h1>
      <h2>Stacked Tiny</h2>
      <div class="fluid-grid12 grid-stacked-tiny">
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
      </div>
      <h2>Stacked Small</h2>
      <div class="fluid-grid12 grid-stacked-small">
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
      </div>
      <h2>Stacked Medium</h2>
      <div class="fluid-grid12 grid-stacked-medium">
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
      </div>
      <h2>Stacked Tiny and Small</h2>
      <div class="fluid-grid12 grid-stacked-tiny grid-stacked-small">
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
      </div>
    </div>
  </body>
</html>
